/* components */
import TaskReviewListMethods from '@src/modules/task/taskTypes/review/TaskReviewListMethods'
import { BizTableTaskScopeSlot } from '@src/component/business/BizTable/BizTableTask'
/* enum */
import SubscriptionModuleEnum from '@model/enum/SubscriptionModuleEnum'
/* model */
import { COPY_TEXT_CONTENT, COPY_TEXT_MESSAGE, NOT_REVIEW_MASSAGE, NOT_AUTO_REVIEW_MASSAGE } from '@src/model/const/Alert'
import { EvaluateValueEnum, ReviewTypeValueEnum, ReviewValueEnum } from '@src/modules/task/taskTypes/review/TaskReviewListModel'
/* vue */
import { VNode } from 'vue'
import MsgModel from '@model/MsgModel'
import { TaskExportGroupChecked } from '@src/component/business/BizListView/Impl/BizListViewTask/BizListViewTaskInterface'
import TaskApprove from '@model/entity/TaskApprove'
import { checkButtonDisplayed } from '@src/util/dom';
import { isOpenData } from '@src/util/platform'
import RootWindowInitData from '@model/interface/initData/RootWindowInitData'
import { useRole } from '@hooks/useRole.ts'

/* export & import */
import { taskReviewListRenderExport } from '@src/api/Export';
import { getRootWindowInitData } from '@src/util/window'
import i18n from '@src/locales'
// import { eventListImport_1, eventListImportTem_1 } from '@src/api/Import';

class TaskReviewListRender extends TaskReviewListMethods {
  get rootWindowInitData(): RootWindowInitData {
    return getRootWindowInitData()
  }
  /**
   * @description 渲染回访类型按钮组
   * @return {VNode}
   */  
  private renderReviewTypeButtonGroup(): VNode {
    return (
      <el-button-group>
        <el-button 
          type={this.getButtonType(this.isManualReview)} 
          onClick={() => this.toggleReviewType(ReviewTypeValueEnum.Manual)}
        >
          {i18n.t('task.taskTypes.review.manualReview')}
        </el-button>
        <el-button 
          type={this.getButtonType(this.isAutoReview)} 
          onClick={() => this.toggleReviewType(ReviewTypeValueEnum.Auto)}
        >
          {i18n.t('task.taskTypes.review.autoReview')}
        </el-button>
      </el-button-group>
    )
  }
  
  /**
   * @description 渲染回访值按钮组
   * @return {VNode}
   */  
  private renderReviewValueButtonGroup(): VNode {
    return (
      <el-button-group>
        <el-button 
          type={this.getButtonType(this.isReviewAll)} 
          onClick={() => this.toggleReviewValue(ReviewValueEnum.All)}
        >
          {i18n.t('common.base.all')}
        </el-button>
        <el-button 
          type={this.getButtonType(this.isReviewed)} 
          onClick={() => this.toggleReviewValue(ReviewValueEnum.Reviewed)}
        >
          {i18n.t('task.taskTypes.review.reviewed')}
        </el-button>
        <el-button 
          type={this.getButtonType(this.isUnReview)} 
          onClick={() => this.toggleReviewValue(ReviewValueEnum.UnReview)}
        >
          {i18n.t('task.taskTypes.review.notReviewed')}
        </el-button>
        <el-button 
          type={this.getButtonType(this.isFollowUp)} 
          onClick={() => this.toggleReviewValue(ReviewValueEnum.FollowUp)}
        >
          {i18n.t('task.taskTypes.review.following')}
        </el-button>
        <el-button
          type={this.getButtonType(this.isAssignToMe)}
          onClick={() => this.toggleReviewValue(ReviewValueEnum.AssignToMe)}
        >
          {i18n.t('task.taskTypes.review.assignToMe')}
        </el-button>
      </el-button-group>
    )
  }


  /**
   * @description 渲染回访权限提示模块
   * @return {VNode}
   */  
   public renderReviewPermissionContainer(): VNode {
    //  人工回访
    if(this.reviewType === 1 && !this.initData.reviewOn) {
      return (
        <div ref="tableComContainer" class="review-permission-tips-block">
          { NOT_REVIEW_MASSAGE }
        </div> 
      )
    }
    
    // 自动回访
    if(this.reviewType === 2 && !this.initData.autoReviewOn) {
      return (
        <div ref="tableComContainer" class="review-permission-tips-block">
          { NOT_AUTO_REVIEW_MASSAGE }
        </div> 
      )
    }
    
    return (
      <div></div>
    )
  }
  
  /**
   * @description 渲染评价值按钮组
   * @return {VNode}
   */  
  private renderEvaluateValueButtonGroup(): VNode {
    return (
      <el-button-group>
        <el-button 
          type={this.getButtonType(this.isEvaluateAll)} 
          onClick={() => this.toggleEvaluateValue(EvaluateValueEnum.All)}
        >
          {i18n.t('common.base.all')}
        </el-button>
        <el-button 
          type={this.getButtonType(this.isEvaluated)} 
          onClick={() => this.toggleEvaluateValue(EvaluateValueEnum.Evaluated)}
        >
          {i18n.t('portal.evaluated')}
        </el-button>
        <el-button 
          type={this.getButtonType(this.isUnEvaluate)} 
          onClick={() => this.toggleEvaluateValue(EvaluateValueEnum.UnEvaluate)}
        >
          {i18n.t('task.taskTypes.review.notReviewed')}
        </el-button>
      </el-button-group>
    )
  }
  
  /**
   * @description: 渲染订阅按钮
   * @return {VNode}
   */  
  private renderSubscriptionButton(): VNode {
    return (
      <subscription-button 
        class="cur-point"
        module={SubscriptionModuleEnum.TaskReview}
        subscribed={this.initData?.hasSub}
        tooltipContent={i18n.t('task.tip.subscribeTaskTip')}
        onChange={(value: boolean) => this.initData.hasSub = value}
      >
      </subscription-button>
    )
  }
  
  /**
   * @description: 渲染表格作用域插槽
   * @return {VNode | null} 插槽或空
   */  
  public renderTableScopedSlot(): Record<string, (data: BizTableTaskScopeSlot) => JSX.Element | null>| null {
    const _this = this
    
    return {
      // 回访操作
      reviewOperation: ({ value }: BizTableTaskScopeSlot)=> {
        
        // 允许发送回访短信
        if(_this.isCansendReviewSms(value)) {
          return (
            <el-button
              class='accept-task-button'
              type="text"
              size='small'
              onClick={() => _this.sendReviewSms(value)}
            >
              {i18n.t('task.detail.components.sendEvaluateSms')}
            </el-button>
          )
        } 

        if (!_this.isShowOperateButton) return null
        
        // 允许查看工单
        if (_this.isCanViewTask(value)) {
          return (
            <el-button
              class='accept-task-button'
              type="text"
              size='small'
              onClick={() => _this.viewTask(value)}
            >
              {i18n.t('common.base.view')}
            </el-button>
          )
        }
        
        // 允许回访工单
        if (_this.isCanReview(value)) {
          return (
            <el-button
              class='accept-task-button'
              type="text"
              size='small'
              onClick={() => _this.reViewTask(value)}
            >
              {i18n.t('common.task.button.review')}
            </el-button>
          )
        }
        
        return null
      }
    }
  }
  
  /**
   * @description: 渲染操作区域容器
   * @return {VNode}
   */ 
  public renderOperationContainer(): VNode {
    return (
      <div ref="tableDoContainer" class='common-list-view__v2 operation-container pad-b-none'>
        <div class='common-list-view-header__v2 task-ai'>
          <div class='common-list-view-header__v2-left task-ai'>
            { this.isManualReview ? this.renderReviewValueButtonGroup() : this.renderEvaluateValueButtonGroup() }
          </div>
          <div class='common-list-view-header__v2-right task-ai'>
            { !this.isBasicEditionHideSubscribe && this.renderSubscriptionButton() }
            { this.renderMoreActionDropdown() }
            { this.renderSelectColumnsButton() }
          </div>
        </div>
      </div>
    )
  }
  
  public packUp = true

  /**
   * @description: 渲染头部容器
   * @return {VNode}
   */ 
  public renderHeaderContainer(): VNode {
    return (
      <div ref="tableHeaderContainer" class='header-container'>
        <div class='common-list-header__v2'>
          <div class="flex-1">
            { this.renderReviewTypeButtonGroup() }
          </div>
          <div class="flex-x">
            <div class="search-container">
              { this.renderSearchContainer() }
            </div>
            { this.renderAdvancedSearchButton() }
          </div>
        </div>

        {this.packUp?<div class="task-type-filter">
         <div class="task-list-header-nav">
          <div class="task-filter-item">
            <div class="task-font14 task-c7 state">{i18n.t('common.task.taskType')}：</div>
            <div class="list" >
              <div class="list-item task-flex task-ai">
                {[...[{name:i18n.t('common.base.all'),id:undefined}],...this.taskTypes1].map((item:any)=>{
                  return (item.id == this.currentTaskType?.id )?<div class="task-nav-create task-c2 task-padding-0" onClick={() => this.changeTaskType(item)}>
                    <div class="actived" title={item.name}>{item.name}</div>
                  </div>: <div class="task-nav-create" onClick={() => this.changeTaskType(item)}>
                    <span title={item.name}>{item.name}</span>
                  </div>
                })}
              </div>
            </div>
          </div>
         </div>
        </div>:null}
        <div class="pack-up">
          <div onClick={() => this.changePackUpLocal()}>
           {this.packUp?<i class="iconfont icon-Icon_up"></i>:<i class="iconfont icon-more" ></i>}
          </div>
        </div>
      </div>  
    )
  }

  public changeTaskType(item:any){
    // @ts-ignore
    this.$track.clickStat(this.$track.formatParams('QUICK_SEARCH', '工单类型'));

    const {name,id}=item
    this.currentTaskType={
      id,
      name,
      templateId:id
    }
    this.initializeTaskTypeAllFields()
    this.refresh()
  }
  
  /**
   * @description: 渲染其他组件容器
   * @return {VNode}
   */ 
  public renderComponentsContainer(): VNode {
    return (
      <div>
        {/* { this.renderAdvancedSearchPanel() } */
        this.renderAdvancedSearchPanelAllot()}
        { this.renderSelectColumnComponent() }
        { this.renderSelectionPanelComponent() }
        {/* { this.renderExportComponent() } */}
        { this.renderExportTaskComponent() }
        { this.renderTaskReviewDialogComponent() }
        { this.renderApproveDialogComponent() }
        { this.renderSendSmsDialogComponent() }
      </div>
    )
  }

  /**
   * @description: 渲染更过操作下拉框菜单
   * @return {VNode}
   */
  public renderMoreActionDropdownMenu(): VNode {
   
    return (
      <el-dropdown-menu>
        {
          <el-dropdown-item disabled={ !(this.isManualReview && this.isUnReview)}>
            <div onClick={() => this.batchAssignment()}>{i18n.t('task.taskTypes.allot.batchAllot')}</div>
          </el-dropdown-item>
        }
        {
          this.allowExport && checkButtonDisplayed() &&(
            <el-dropdown-item >
              <div onClick={() => this.exportTask()}>{i18n.t('common.base.export')}</div>
            </el-dropdown-item>
          )
        }
        {
          this.allowExport && checkButtonDisplayed() &&(
            <el-dropdown-item>
              <div onClick={() => this.exportTask(true)}>{i18n.t('common.base.exportAll')}</div>
            </el-dropdown-item>
          )
        }
        {         
          this.allowExport &&(
            <el-dropdown-item>
              <div onClick={() => this.sendReviewSms()}>{i18n.t('task.detail.components.sendEvaluateSms')}</div>
            </el-dropdown-item>
          )
        }
      </el-dropdown-menu>
    )
  }

  public renderExportTaskComponent() {
    return (
      <base-export-group
        ref='BaseExportComponent'
        storageKey={this.taskTypeExportStorageKey}
        alert={(result: MsgModel<any>) => this.exportAlert(result)}
        buildParams={(checkedArray: TaskExportGroupChecked, ids: string[], exportOneRow?: boolean) => this.buildExportParams(checkedArray, ids, exportOneRow)}
        columns={this.exportTaskColumns.slice()}
        group
        validate={(ids: string[], max: number) => this.checkExportCount(ids, max)}
        method='post'
        action={taskReviewListRenderExport}
        isShowExportTip={isOpenData}
      />
    )
  }

  /**
   * @description 渲染回访弹窗
   * @return {VNode}
   */  
  public renderTaskReviewDialogComponent() {
    return (
      <task-feedback-dialog
        ref="FeedBackDialogComponent"
        from='reviewList'
        readonly={this.readonly}
        isCustomerRefresh={true}
        task={this.currentReviewTask}
        evaluate-config={this.initData.evaluateConfig}
        proposeApprove={(approveData: TaskApprove) => this.proposeApprove(approveData)}
        onRefresh={()=> {this.refresh()}}
      />
    )
  }

  public renderApproveDialogComponent(): VNode {
    return (
      <propose-approve-dialog
        ref='ProposeApproveDialogComponent'
        remarkRequired={this.taskConfig?.approveRemark}
        taskId={this.currentReviewTask?.id} 
        taskNo={this.currentReviewTask?.taskNo} 
      />
    )
  }

  public renderSendSmsDialogComponent(): VNode {
    return (
      <send-sms-dialog
        ref="SendSmsDialogComponent"
        ids={this.currentEditIds}>
      </send-sms-dialog>
    )
  }
  
  /**
   * @description 获取属性
  */
   private getAttribute() {
    return {
      props: {
        title: i18n.t('task.taskTypes.review.setGuide'),
        show: this.visibleGuide
      },
      on: {
        'update:show': (value: boolean) => {
          this.visibleGuide = value
        }
      }
    }
  }
  /* 
  *满意度首次进入引导
  */


  public renderReviewGuide(): VNode {
    const attrs = this.getAttribute()
    const { isAdmin: isSystemManager } = useRole()
    return (
      <div>
        {/* <div id="select-leading-cadre"> </div>
        <div id="product-superqrcode-set"> </div> */}
        <base-modal {...attrs}>
          <div class='task-review-list-dialog-body'>
            <div class='task-review-list-dialog-body-text'>
            {COPY_TEXT_CONTENT}
            </div>
            <div class='task-review-list-dialog-body-text'>
            {COPY_TEXT_MESSAGE}
            <span onClick={() => this.copyGuideText(ReviewValueEnum.FollowUp)}>{i18n.t('common.base.copy')}</span>
            </div>
            <div class='task-review-list-dialog-body-text-min'>
            （{i18n.t('task.guide.reviewTip')}）
            </div>
            <div class='task-review-list-dialog-body-btn-group'>
              {isSystemManager && <el-button class='upgrade-button' type='primary' onClick={() => this.toSetMessage()}>
                {i18n.t('task.taskTypes.review.goSetSmsTemplate')}
              </el-button>}
            </div>
          </div>
        </base-modal>
      </div>
    )
  }
}

export default TaskReviewListRender
